<template>
	<view class="wrap">
		<view style="background: linear-gradient( 180deg, #FFEEEB 0%, #F8F8FA 100%);height: 310rpx;position: relative;">
			<u-navbar @leftClick="back()" title="場地版" placeholder bg-color="transparent">
			</u-navbar>
			<view class="box" v-if="info.payment_type == 3">
				<image src="/static/db_maiduan.png" mode=""></image>
				<text>永久作用</text>
			</view>
			
			<view class="temp-yuezu" v-if="info.payment_type == 2">
				<view class="box">
					<image src="/static/db_yuezu.png" mode=""></image>
					<text>到期時間：{{info.expire_time}}</text>
				</view>
				<view class="package u-m-30">
					<view class="title ">我要续费</view>
					<view class="list u-flex u-flex-between u-m-t-20">
						<view class="item u-flex-1 u-p-30" @click="packageIndex = index" :class="{'active': packageIndex === index}" v-for="(item, index) in packageList" :key="item.id">
							<view class="time">{{item.name}}</view>
							<view class="price u-m-t-20"><text>￥</text>{{item.amount}}</view>
						</view>
					</view>
					
					<view class="title u-m-b-50 u-m-t-30">支付方式</view>
					<view class="u-flex-y-center u-flex-between u-m-b-40" @click="paymethod=0">
						<view class="u-flex-y-center">
							<image src="../../static/p_wx.png" style="width: 40rpx;height: 40rpx;"></image>
							<view class="u-m-l-16 u-f-28">微信支付</view>
						</view>
						<image src="../../static/check.png" style="width: 34rpx;height: 34rpx;" v-if="paymethod!=0"></image>
						<image src="../../static/checked.png" style="width: 34rpx;height: 34rpx;" v-if="paymethod==0"></image>
					</view>
					<view class="submit u-flex u-flex-center u-flex-y-center u-c-fff u-bold u-m-t-78" @click="payYuezu()">
						立即支付
					</view>
				</view>
			</view>
			
			<view class="temp-yuezu" v-if="info.payment_type == 1">
				<view class="box m">
					<text>帳戶餘額</text>
					<text class="money">{{info.balance}}</text>
					<text class="mx" @click="toList()">明細</text>
				</view>
				<view class="yue u-m-30">
					<view class="card u-p-30">
						<view class="title">充值金额</view>
						<view class="inpubox u-flex u-flex-y-center u-m-t-40">
							<text>¥</text> <input type="digit" maxlength="8" v-model="money" placeholder="请输入充值金额" placeholder-style="color:#C6C6C6;"/>
						</view>
					</view>
					<view class="title u-m-b-50 u-m-t-30 u-bold" >支付方式</view>
					<view class="u-flex-y-center u-flex-between u-m-b-40" @click="paymethod=0">
						<view class="u-flex-y-center">
							<image src="../../static/p_wx.png" style="width: 40rpx;height: 40rpx;"></image>
							<view class="u-m-l-16 u-f-28">微信支付</view>
						</view>
						<image src="../../static/check.png" style="width: 34rpx;height: 34rpx;" v-if="paymethod!=0"></image>
						<image src="../../static/checked.png" style="width: 34rpx;height: 34rpx;" v-if="paymethod==0"></image>
					</view>
					<view class="submit u-flex u-flex-center u-flex-y-center u-c-fff u-bold u-m-t-78" @click="payYue()">
						立即支付
					</view>
				</view>
				
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
	import API from "./request.js"
	export default {
		data() {
			return {
				info: uni.getStorageSync('DB_userinfo'),
				packageList: [],
				paymethod: 0,
				packageIndex: 0,
				order_no: '',
				money: '',
			}
		},
		onShow() {
			this.getPackageList()
		},
		methods: {
			toList(){
				uni.navigateTo({
					url: "./history"
				})
			},
			async payYue(){
				try {
					if (!this.money) return uni.showToast({
						title: '请输入充值金额',
						icon: 'none'
					})
					// if (this.money < 10) return uni.showToast({
					// 	title: '充值金额最少10元',
					// 	icon: 'none'
					// })
					uni.showLoading()
					const orderResult = await API.request('post','/device/recharge', {
							payment_type: this.info.payment_type,
							user_id: uni.getStorageSync('userInfo').user_id,
							package_id: '',
							amount: this.money,
						})
					const payResult = await API.request('post', '/device/pay', {
						order_no: orderResult.order_no
					})
					uni.requestPayment({
						"provider": "wxpay",
						timeStamp: payResult.result.timeStamp,
						nonceStr: payResult.result.nonceStr,
						package: payResult.result.package,
						signType: payResult.result.signType,
						paySign: payResult.result.paySign,
						success: (res2) => {
							this.order_no = ''
							uni.hideLoading()
							uni.showToast({
								title: '支付成功',
								icon: 'none'
							})
							this.money = ''
							API.request('post', '/device/getDeviceInfo').then(inforeq => {
								this.info = inforeq
								uni.setStorageSync('DB_userinfo', inforeq)
							})
						},
						fail(e) {
							console.log(e)
							uni.hideLoading()
							uni.showToast({
								title: '支付失败,请重新支付',
								icon: 'none'
							})
						}
					})
				} catch (error) {
					uni.showToast({
						title: '出现异常',
						icon: 'none'
					})
					uni.hideLoading()
					//TODO handle the exception
				}
			},
			async payYuezu(){
				try {
					uni.showLoading()
					const orderResult = await API.request('post','/device/recharge', {
							payment_type: this.info.payment_type,
							user_id: uni.getStorageSync('userInfo').user_id,
							package_id: this.packageList[this.packageIndex].id
						})
					const payResult = await API.request('post', '/device/pay', {
						order_no: orderResult.order_no
					})
					uni.requestPayment({
						"provider": "wxpay",
						timeStamp: payResult.result.timeStamp,
						nonceStr: payResult.result.nonceStr,
						package: payResult.result.package,
						signType: payResult.result.signType,
						paySign: payResult.result.paySign,
						success: (res2) => {
							this.order_no = ''
							uni.hideLoading()
							uni.showToast({
								title: '支付成功',
								icon: 'none'
							})
							API.request('post', '/device/getDeviceInfo').then(inforeq => {
								this.info = inforeq
								uni.setStorageSync('DB_userinfo', inforeq)
							})
						},
						fail(e) {
							console.log(e)
							uni.hideLoading()
							uni.showToast({
								title: '支付失败,请重新支付',
								icon: 'none'
							})
						}
					})
				} catch (error) {
					uni.showToast({
						title: '出现异常',
						icon: 'none'
					})
					uni.hideLoading()
					//TODO handle the exception
				}
				
			},
			getPackageList(){
				API.request('post','/device/getPackageList')
				.then(res=> {
					this.packageList = res
				})
			},
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		background-color: #fff;
		min-height: 100vh;
		box-sizing: border-box;
	}
	.yue {
		.card {
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.06);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 1rpx solid #F7F7F8;
			.inpubox {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 60rpx;
				line-height: 1;
				color: #666;
				input {
					margin-left: 20rpx;
					height: 90rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 64rpx;
					color: #333;
				}
			}
		}
		
	}
	.package {
		.title {
			font-weight: bold;
			font-size: 32rpx;
			color: #141936;
		}
		.list {
			gap: 45rpx;
		}
		.item {
			background-color: #F8F9FD;
			box-sizing: border-box;
			&.active {
				background: rgba(234,77,68,0.1);
				border-radius: 20rpx 20rpx 20rpx 0rpx;
				border: 2rpx solid rgba(234, 77, 68, 1);
			}
			.price {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 45rpx;
				color: #EA4D44;
				text {
					font-size: 28rpx;
				}
			}
		}
	}
	.submit {
		height: 88rpx;
		background: linear-gradient( 130deg, #F69792 0%, #EA4D44 100%);
		border-radius: 44rpx;
	}
  .box {
	  margin: 30rpx;
	  height: 100rpx;
	  background: linear-gradient( 90deg, #595365 0%, #413833 100%);
	  border-radius: 20rpx 20rpx 20rpx 20rpx;
	  display: flex;
	  padding: 30rpx;
	  align-items: center;
	  box-sizing: border-box;
	  font-family: PingFang SC, PingFang SC;
	  font-weight: 500;
	  font-size: 26rpx;
	  color: #FDE8D4;
	  position: relative;
	  image {
		  width: 112rpx;
		  height: 34rpx;
		  margin-right: 20rpx;
	  }
	  &.m {
		 flex-direction: column;
		 height: auto;
		 align-items: flex-start;
		.money {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 48rpx;
			color: #FDE8D4;
			margin-top: 40rpx;
		} 
		.mx {
			position: absolute;
			right: 30rpx;
			bottom: 30rpx;
			width: 144rpx;
			height: 66rpx;
			background: linear-gradient( 135deg, #ECB491 0%, #FEE8D1 100%);
			border-radius: 33rpx;
			text-align: center;
			line-height: 66rpx;
			color: rgba(44, 9, 5, 1);
			font-size: 28rpx;
		}
	  }
  }
</style>
